<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{app.name}">企业云盘项目</title>
    <!-- 引用外部样式表（对话框样式依赖此文件） -->
    <link th:href="@{/assets/css/page.css}" rel="stylesheet"/>
    <style>
        /* 页面基础样式（保留原有） */
        body{
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            margin: 0;
        }
        body >header {
            display: flex;
            width: 100%;
            justify-content: flex-start; /* 改为左对齐，避免元素跳动 */
            padding: 10px;
            align-items: center;
            height: 100px;
            position: relative; /* 新增：用于固定个人信息区域位置 */
        }
        body > header >img{
            height: 80px;
            transition: opacity 0.3s ease; /* 平滑隐藏效果 */
        }
        /* 按钮容器：固定宽度，确保位置不变 */
        .toggle-btn-container {
            width: 40px;
            margin: 0 15px;
        }
        #toggle-nav-btn {
            width: 30px;
            height: 30px;
            padding: 0;
            background-color: #f5f5f5;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #toggle-nav-btn:hover {
            background-color: #e9e9e9;
        }
        body > header >nav.lang-nav { /* 给语言导航添加特定类 */
            width: 150px;
            display: flex;
            justify-content: space-between;
            padding-right: 20px;
            margin-right: auto; /* 推到左侧，确保按钮位置固定 */
            transition: opacity 0.3s ease;
        }
        body > section{
            width: 100%;
            flex-grow: 1;
            display: flex;
        }
        body > section > nav{
            flex-basis: 130px;
            height: 100%;
            border-right: 1px solid #ddd;
            margin-top: 20px;
        }
        body > section > iframe{
            flex-grow: 1;
            height: 100%;
            border-width: 0;
        }
        #gd-user-info-id{
            position: absolute; /* 绝对定位，不受其他元素影响 */
            top: 33px;
            right: 90px;
            width: 160px;
            display: flex;
            flex-direction: column;
            align-items: start;
        }
        .menu-level3 > li{
            margin-left: 13px;
        }
        .fade{
            display: none;
        }
        .fade.in{
            display: block;
        }
        ul.menu-level3 > li.focus{
            background-color: #dfd;
        }

        /* 补充表单验证样式（配合checkDom方法） */
        .form-control.error {
            border-color: #e74c3c;
            box-shadow: 0 0 6px rgba(231, 76, 60, 0.3);
        }
        .error-message {
            color: #e74c3c;
            font-size: 12px;
            margin-top: 5px;
            display: block;
        }

        /* 缩放状态样式 */
        .nav-shrinked header img {
            opacity: 0;
            width: 0; /* 用宽度收缩代替display:none，避免布局跳动 */
            padding: 0;
            margin: 0;
        }
        .nav-shrinked header > nav.lang-nav {
            opacity: 0;
            width: 0;
            padding: 0;
            margin: 0;
            overflow: hidden; /* 隐藏内容 */
        }
    </style>
</head>
<body>

<header>
    <img th:if="${session.lang} eq 'en'" th:src="@{/assets/images/logo_en.png}">
    <img th:unless="${session.lang} eq 'en'" th:src="@{/assets/images/logo_zh.png}">

    <!-- 按钮容器：固定宽度确保位置不变 -->
    <div class="toggle-btn-container">
        <button id="toggle-nav-btn" class="btn">
            <i class="glyphicon glyphicon-eye-open"></i> <!-- 眼睛图标 -->
        </button>
    </div>

    <nav class="lang-nav"> <!-- 添加特定类名 -->
        <a th:href="@{/(lang=en)}" th:text="#{login.english}"></a>
        <a th:href="@{/(lang=zh)}" th:text="#{login.chinese}"></a>
    </nav>

    <nav></nav>

    <nav id="gd-user-info-id">
        <a id='gd-user-btn-id' href="#" class="btn">
            <i class="glyphicon glyphicon-user"></i>
            <span th:unless="${session.lang} eq 'en'"  sec:authentication="principal.niceName"></span>
            <span th:if="${session.lang} eq 'en'"  sec:authentication="principal.username"></span>
        </a>

        <ul class="nav navbar-btn hidden">
            <!-- 修改用户按钮（保留ID用于绑定事件） -->
            <li>
                <a href="#" id="modify-current-user-btn">
                    <i class=" glyphicon glyphicon-tower"></i>
                    <span th:text="#{main.user.modify}"></span>
                </a>
            </li>

            <li>
                <a href="#" >
                    <i class=" glyphicon glyphicon-phone"></i>
                    <span th:text="#{main.passwd.modify}"></span>
                </a>
            </li>

            <li>
                <a th:href="@{/logout}" >
                    <i class=" glyphicon glyphicon-off"></i>
                    <span th:text="#{main.user.logout}"></span>
                </a>
            </li>
        </ul>
    </nav>
</header>

<ul id="gd-sys-menu-id" class="nav nav-tabs">
    <li th:each="item:${session.menuList}" th:forid="${'service-menu' + item.menuId}">
        <a href="#">
            <i th:class="${item.menuIcon}"></i>
            <span th:text="${item.menuName}"></span>
        </a>
    </li>
</ul>

<section>
    <nav>
        <ul class="service-menu nav navbar-btn tab-pane fade" th:each="menu1 :${session.menuList}" th:id="${'service-menu' + menu1.menuId}">
            <li th:each="menu2:${menu1.child}">
                <a href="#">
                    <i th:class="${menu2.menuIcon}"></i>
                    <span th:text="${menu2.menuName}"></span>
                </a>
                <ul class="nav navbar-btn menu-level3" >
                    <li th:each="menu3:${menu2.child}">
                        <a th:href="${menu3.getMenuUrl()}" target="contents">
                            <i th:class="${menu3.menuIcon}"></i>
                            <span th:text="${menu3.menuName}"></span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
    <iframe name="contents" th:src="@{/welcomePage}"></iframe>
</section>

<!-- 用户信息修改对话框 -->
<div id="modify-user-dialog-id" style="display: none">
    <div class="dialog-container">
        <!-- 对话框头部（确认/取消按钮） -->
        <header>
            <a href="#" class="btn" id="dialog-confirm-btn">
                <i class="glyphicon glyphicon-ok"></i>
                <span th:text="#{common.confirm}"></span>
            </a>
            <a href="#" class="btn" id="dialog-cancel-btn">
                <i class="glyphicon glyphicon-remove"></i>
                <span th:text="#{common.cancel}"></span>
            </a>
        </header>

        <!-- 对话框内容区（表单） -->
        <div class="dialog-content">
            <!-- 表单提交地址统一使用后端已有修改接口 -->
            <form id="modify-user-form-id" method="post" th:action="@{/user/modifyUserInfoById}">
                <div class="form-group">
                    <span th:text="#{user.uuid}"></span>
                    <input class="form-control" name="userUuid" readonly>
                </div>

                <div class="form-group">
                    <span th:text="#{user.name}"></span>
                    <input class="form-control" name="userName" pattern="^[a-z,A-Z,0-9]{4,}$" required>
                    <span class="error-message" th:text="#{user.name.error}"></span> <!-- 错误提示 -->
                </div>

                <div class="form-group">
                    <span th:text="#{user.nice.name}"></span>
                    <input class="form-control" name="niceName" pattern="^.+$" required>
                    <span class="error-message" th:text="#{user.nice.name.error}"></span>
                </div>

                <div class="form-group">
                    <span th:text="#{user.email}"></span>
                    <input class="form-control" name="email" type="email" pattern="^[A-Za-z0-9]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$" required>
                    <span class="error-message" th:text="#{user.email.error}"></span>
                </div>

                <div class="form-group">
                    <span th:text="#{user.mobile}"></span>
                    <input class="form-control" name="mobile" type="number" pattern="^[0-9]{11}$" required>
                    <span class="error-message" th:text="#{user.mobile.error}"></span>
                </div>
            </form>
        </div>
    </div>
</div>

<script th:inline="javascript">
    $(function () {
        // 原有页面功能（保留）
        $("#gd-user-btn-id").click(function (event) {
            event.stopPropagation();
            $("#gd-user-info-id >ul").removeClass("hidden");
        });

        $("body").click(function () {
            $("#gd-user-info-id >ul").addClass("hidden");
        });

        $("ul#gd-sys-menu-id > li").click(function () {
            $("ul#gd-sys-menu-id > li").removeClass('active');
            $(this).addClass('active');
            $(".service-menu").removeClass('in');
            var forid = $(this).attr("forid");
            $("#" + forid).addClass("in");
        });

        $("ul#gd-sys-menu-id > li:first").click();

        $("ul.menu-level3 > li").click(function () {
            $("ul.menu-level3 > li").removeClass("focus");
            $(this).addClass("focus");
        });

        // ============== 导航条缩放功能（眼睛图标版） ==============
        $("#toggle-nav-btn").click(function() {
            // 切换body的缩放状态类
            $("body").toggleClass("nav-shrinked");

            // 切换眼睛图标（睁眼/闭眼）
            var $icon = $(this).find("i");
            if ($("body").hasClass("nav-shrinked")) {
                $icon.removeClass("glyphicon-eye-open").addClass("glyphicon-eye-close");
            } else {
                $icon.removeClass("glyphicon-eye-close").addClass("glyphicon-eye-open");
            }
        });

        // 页面加载时恢复上次保存的状态
        if (localStorage.getItem("navShrinked") === "true") {
            $("body").addClass("nav-shrinked");
            $("#toggle-nav-btn i").removeClass("glyphicon-eye-open").addClass("glyphicon-eye-close");
        }

        // ============== 用户信息修改功能优化 ==============

        // 1. 初始化对话框（使用jQuery UI dialog）
        $("#modify-user-dialog-id").dialog({
            autoOpen: false,
            width: 450,
            height: 'auto',
            modal: true,
            resizable: false,
            title: /*[[#{user.modify.dialog.title}]]*/'',
            buttons: []
        });

        // 2. 表单提交配置
        $("#modify-user-form-id").ajaxForm({
            dataType: "json",
            beforeSubmit: function() {
                return $("form#modify-user-form-id input.form-control").checkDom();
            },
            success: function(data) {
                if (data.success) {
                    message(data.msg || /*[[#{user.modify.success}]]*/'修改成功');
                    $("#modify-user-dialog-id").dialog('close');
                } else {
                    message(data.msg || /*[[#{user.modify.fail}]]*/'修改失败');
                }
            },
            error: function(xhr) {
                var errorMsg = xhr.responseJSON?.msg || /*[[#{common.network.error}]]*/'网络错误，请重试';
                message(errorMsg);
            }
        });

        // 3. 绑定修改用户按钮点击事件
        $("#modify-current-user-btn").click(function(e) {
            e.preventDefault();
            e.stopPropagation();
            getCurrentUserInfo();
        });

        // 4. 对话框确认按钮事件
        $("#dialog-confirm-btn").click(function(e) {
            e.preventDefault();
            $("#modify-user-form-id").submit();
        });

        // 5. 对话框取消按钮事件
        $("#dialog-cancel-btn").click(function(e) {
            e.preventDefault();
            $("#modify-user-dialog-id").dialog('close');
            $("form#modify-user-form-id .form-control").removeClass("error");
            $("form#modify-user-form-id .error-message").hide();
        });

        // ============== 核心功能函数 ==============

        /**
         * 获取当前登录用户信息
         */
        function getCurrentUserInfo() {
            $.ajax({
                type: 'post',
                async: true,
                dataType: 'json',
                url: /*[[@{/user/getCurrentUserInfo}]]*/'',
                beforeSend: function() {
                    message(/*[[#{common.loading}]]*/'加载中...', 'info');
                },
                success: function(data) {
                    closeMessage();
                    if (data && data.userUuid) {
                        $("form#modify-user-form-id input.form-control").each(function(index, item) {
                            var name = $(item).attr("name");
                            $(this).val(data[name] || '');
                        });
                        $("#modify-user-dialog-id").dialog('open');
                    } else {
                        message(data?.msg || /*[[#{user.load.fail}]]*/'获取用户信息失败');
                    }
                },
                error: function(xhr) {
                    closeMessage();
                    var errorMsg = xhr.responseJSON?.msg || /*[[#{common.network.error}]]*/'网络错误';
                    message(errorMsg);
                }
            });
        }

        /**
         * 表单验证方法
         */
        $.fn.checkDom = function() {
            var isValid = true;
            $(this).each(function() {
                var $input = $(this);
                var value = $input.val().trim();
                var pattern = $input.attr("pattern");
                var required = $input.prop("required");

                $input.removeClass("error");
                $input.siblings(".error-message").hide();

                if (required && value === '') {
                    $input.addClass("error");
                    $input.siblings(".error-message").show();
                    isValid = false;
                } else if (pattern && !new RegExp(pattern).test(value)) {
                    $input.addClass("error");
                    $input.siblings(".error-message").show();
                    isValid = false;
                }
            });
            return isValid;
        };

        /**
         * 消息提示函数
         */
        function message(text, type = 'info') {
            var $msg = $("<div class='message-toast' style='position:fixed;top:20px;left:50%;transform:translateX(-50%);padding:10px 20px;background:#333;color:white;border-radius:4px;z-index:9999;'>" + text + "</div>");
            $("body").append($msg);
            setTimeout(function() {
                $msg.fadeOut(300, function() { $(this).remove(); });
            }, 3000);
        }

        /**
         * 关闭消息提示
         */
        function closeMessage() {
            $(".message-toast").remove();
        }
    });

</script>
</body>
</html>